<template>
  <el-dialog v-on="$listeners" v-bind="$attrs" custom-class="base-dialog">
    <slot></slot>
    <slot slot="footer" name="footer" v-if="footer">
      <el-button
        v-if="cancelVisible"
        v-bind="cancelButtonProps"
        @click="onCancel"
      >
        {{ cancelText }}
      </el-button>
      <el-button v-if="okVisible" v-bind="okButtonProps" @click="onOk">
        {{ okText }}
      </el-button>
    </slot>
  </el-dialog>
</template>

<script>
// 基础弹窗
// @group Dialog
export default {
  name: "BaseDialog",
  props: {
    // 显示底部
    footer: {
      type: Boolean,
      default: true,
    },
    // 显示取消按钮
    cancelVisible: {
      type: Boolean,
      default: true,
    },
    // 取消按钮属性
    cancelButtonProps: {
      type: Object,
      default: () => ({}),
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: "取 消",
    },
    // 显示确定按钮
    okVisible: {
      type: Boolean,
      default: true,
    },
    // 确定按钮属性
    okButtonProps: {
      type: Object,
      default: () => ({
        type: "primary",
      }),
    },
    // 确定按钮文字
    okText: {
      type: String,
      default: "确 定",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 弹窗关闭事件
    onCancel() {
      this.$emit("cancel");
    },
    // 确认按钮事件
    onOk() {
      this.$emit("ok");
    },
  },
};
</script>

<style scoped lang="scss">
</style>
